Como fazer um pipe para formatar CPF no angular?

pipe cpf angular

Veja abaixo um exemplo passo a passo de como fazer um pipe para formatar CPF no angular.

Criando um Pipe Personalizado para Formatar CPF

Aqui estão os passos para criar um pipe personalizado que formata números de CPF em um formato mais compreensível, como "XXX.XXX.XXX-XX":

Primeiro passo: gerar o pipe

Você precisa criar um pipe personalizado para formatar o CPF. Abra um terminal na raiz do seu projeto Angular e execute o seguinte comando para gerar um novo pipe.

ng generate pipe cpf-format

Isso criará um novo arquivo chamado cpf-format.pipe.ts no diretório src/app.

Segundo passo: Editar o pipe

Abra o arquivo cpf-format.pipe.ts e defina a lógica para formatar o CPF.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'cpfFormat'
})
export class CpfFormatPipe implements PipeTransform {
transform(value: any): string {
    if (!value) return '';

    // Remove caracteres não numéricos
    const numericValue = value.toString().replace(/\D/g, '');

    // Formatação do CPF (XXX.XXX.XXX-XX)
    return numericValue.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
}
}

O pipe está pronto, você pode usá-lo em qualquer lugar em seu template Angular.

Terceiro passo: Utilizar o pipe

No componente onde deseja exibir um CPF formatado você pode usar no HTML, faça o seguinte:

<p>CPF: {{ cpfValue | cpfFormat }}</p>

Substitua o cpfValue pela variável que contém o CPF que você deseja formatar.

Quarto passo: Importar e declarar

Certifique-se de importar e declarar o novo pipe no módulo onde você planeja usá-lo. No seu módulo, importe e adicione o CpfFormatPipe à seção declarations:

import { CpfFormatPipe } from './cpf-format.pipe';

@NgModule({
declarations: [
// ...
CpfFormatPipe
],
// ...
})

export class SeuModuloModule { }

Agora, sempre que você usar {{ cpfValue | cpfFormat }} em um template HTML, o CPF será formatado conforme definido no pipe CpfFormatPipe.

Lembre-se de que este é apenas um exemplo básico para formatar um CPF. Dependendo das suas necessidades, você pode ajustar a lógica do pipe para atender a outros requisitos específicos.

Como Formatar CPF no Angular Usando Pipes Personalizados

Ao desenvolver aplicações Angular, é comum lidar com a exibição de informações sensíveis, como números de CPF. Uma abordagem elegante e eficiente para melhorar a experiência do usuário e garantir a formatação correta do CPF é a criação de pipes personalizados. Nesse guia, exploramos como formatar números de CPF de maneira clara e legível usando pipes personalizados no Angular, contribuindo para uma experiência de usuário mais agradável.

O que é um pipe no angular?

Em Angular, um "pipe" é uma funcionalidade que permite transformar o valor de uma expressão de dados antes de exibi-la.

Os pipes no Angular são uma característica poderosa que permite transformar e formatar dados exibidos em templates. Eles permitem que você modifique a aparência dos dados antes de serem apresentados aos usuários, o que é especialmente útil ao lidar com números de CPF. Ao criar um pipe personalizado para formatar CPF, você simplifica o código de template e melhora a legibilidade do código.

Benefícios de Usar Pipes Personalizados para Formatar CPF

Código Limpo e Legível: Ao utilizar pipes personalizados, você separa a lógica de formatação do template, tornando o código mais organizado e legível.

Reusabilidade: O pipe pode ser aplicado a qualquer número de CPF em toda a aplicação, promovendo a reutilização de código.

Manutenção Simplificada: Se você precisar ajustar a formatação do CPF posteriormente, poderá fazer alterações em um único lugar, no pipe personalizado.

Experiência do Usuário Aprimorada: A formatação clara do CPF contribui para uma experiência mais agradável para os usuários, facilitando a identificação dos números.

Ao seguir essas etapas simples para criar um pipe personalizado no Angular, você estará proporcionando uma maneira eficaz e eficiente de formatar números de CPF de maneira amigável para o usuário. Isso resultará em uma melhor experiência geral para os usuários da sua aplicação.

Em resumo, os pipes personalizados são uma ferramenta valiosa para formatar números de CPF no Angular. Eles melhoram a legibilidade do código, promovem a reutilização e contribuem para uma experiência do usuário mais positiva. Implemente essas práticas recomendadas em suas aplicações Angular e colha os benefícios de um código mais limpo e uma interface de usuário mais amigável.

Veja mais:

Como usar o pipe do angular para formatar o CNPJ?
Como usar o pipe do angular para formatar o CEP?
Como usar o pipe do angular para formatar o RG?

Quer acompanhar as novidade do site?